<template>
    <div class="info-collect">
        <Crumb name="Customer Information Record"></Crumb>
        <div class="content">
            <el-button
                    type="primary"
                    @click="openAdd"
            >Add New Record
            </el-button>
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By Customer"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                        size="small"
                        type="primary"
                >Search
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="visitList"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="Detail">
                                    <span>{{ props.row.recordInformation }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="recordTitle"
                            label="Title"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="Customer"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="Visit Times"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="Address"
                            width="400"
                    >
                    </el-table-column>
                    <el-table-column label="Opr">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">Edit
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="console.log(scope.$index, scope.row)">Delete
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"/>
                </div>

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Visiting Abstract"
                        :visible.sync="dialogVisible"
                        width="80%"
                        >

                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                        <el-form-item label="Title" prop="recordTitle">
                            <el-input v-model="ruleForm.recordTitle"/>
                        </el-form-item>
                        <el-form-item label="Customer Name" prop="customerName">
                            <el-input v-model="ruleForm.companyName"/>
                        </el-form-item>
                        <el-form-item label="Times" >
                            <el-input v-model="ruleForm.createTime"/>
                        </el-form-item>
                        <el-form-item label="contact" >
                            <el-input v-model="ruleForm.contact"/>
                        </el-form-item>
                        <el-form-item label="phone" >
                            <el-input v-model="ruleForm.contactNumber"/>
                        </el-form-item>
                        <el-form-item label="Address" >
                            <el-input v-model="ruleForm.address"/>
                        </el-form-item>
                        <el-form-item label="Detail" prop="recordInformation">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 8}"
                                    v-model="ruleForm.recordInformation"/>
                        </el-form-item>
                    </el-form>


                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" v-if="!ruleForm.id" @click="submitForm">Confirm</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {getInformationList,collectInfo} from "../../api/quotation";
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "info-collect",
        mixins:[mixins],
        data() {
            return {
                visitList: [],
                ruleForm: {
                    recordInformation:'',
                    companyName:'',
                    contacts:'',
                    contactNumber:'',
                    address:'',
                    createTime:'',
                    recordTitle:''
                },
                rules: {
                    recordTitle: [
                        { required: true,  trigger: 'blur' },
                    ],
                    recordInformation: [
                        {  required: true,trigger: 'blur' }
                    ],
                },
                key: '',
                dialogVisible:false
            }
        },
        created(){
            this._getInformationList()
        },
        methods: {
            async _getInformationList(){
                const {status,data} = await getInformationList();
                if (status === ERROR_OK) {
                    this.visitList = data;
                    this.length = data.length
                }
            },
            submitForm(){
                this.$refs.ruleForm.validate(async (valid) => {
                    if (valid) {
                        if (!this.ruleForm.id) {
                            const {recordInformation,companyName,contacts,contactNumber,address,createTime,recordTitle} = this.ruleForm;
                            const {status} = await collectInfo({recordInformation,companyName,contacts,contactNumber,address,createTime,recordTitle});
                            if(status===ERROR_OK) {
                                this.$notify.success('Add Successfully');
                                this._getInformationList();
                                this.clear();
                                this.dialogVisible = false
                            } else {
                                this.$notify.error('Error,Please Try again');
                            }
                        }
                    } else {
                        return false;
                    }
                });
            },
            clear(){
                this.ruleForm = {
                    recordInformation:'',
                    id:'',
                    companyName:'',
                    contacts:'',
                    contactNumber:'',
                    address:'',
                    createTime:'',
                    recordTitle:''
                }
            },
            openAdd(){
                this.clear();
                this.dialogVisible = true
            },
            openEdit(r){
                this.ruleForm = r;
                this.dialogVisible = true

            },
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>